<!--
Copyright Yahoo Inc.
SPDX-License-Identifier: Apache-2.0
-->
<template>
  <!-- alert -->
  <div
    v-if="message"
    class="alert alert-sm alert-dismissible"
    :class="alertClass">
    <!-- icon -->
    <span
      class="fa fa-check"
      title="success"
      v-if="type === 'success'" />
    <span
      class="fa fa-info-circle"
      title="info"
      v-if="type === 'info'" />
    <span
      class="fa fa-exclamation-triangle"
      title="warning"
      v-if="type === 'warning' || type === 'danger'" /> <!-- /icon -->
    <!-- message -->
    &nbsp;{{ message || 'undefined message' }}
    <!-- /message -->
    <!-- dismiss alert button -->
    <button
      role="button"
      type="button"
      class="btn-close mt-2"
      @click="done(null)" /> <!-- /dismiss alert button -->
  </div> <!-- /alert -->
</template>

<script>
let timeout;

export default {
  name: 'ArkimeToast',
  props: {
    message: {
      type: String,
      default: ''
    },
    done: {
      type: Function,
      default: () => {}
    },
    duration: {
      type: Number,
      default: 5000
    },
    type: {
      type: String,
      default: 'info'
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.dismissAfter();
      }
    }
  },
  computed: {
    alertClass: function () {
      return `alert-${this.type}`;
    }
  },
  created: function () {
    if (this.message) {
      this.dismissAfter();
    }
  },
  methods: {
    /* helper functions ------------------------------------------ */
    dismissAfter: function () {
      if (timeout) { clearTimeout(timeout); }

      timeout = setTimeout(() => {
        this.done();
      }, this.duration);
    }
  },
  beforeUnmount () {
    if (timeout) { clearTimeout(timeout); }
  }
};
</script>
